<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta charset="UTF-8">
<iframe name="CalFrame" width="144" height="192" id="CalFrame"
	src="/css/calendar.htm"
	style="display: none; position: absolute; z-index: 100; border: 0"></iframe>
<script src="/css/jqp.js"></script>
<title>XToolsCRM - 批量客户共享和转移</title>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<link href="../css/zcss/switchery.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/icons.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/sweetalert.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/custombox.min.css" rel="stylesheet">
<link href="../css/zcss/animate.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">

<link href="../css/zcss/bootstrap-datepicker3.min.css" rel="stylesheet">
<link href="../css/zcss/switchery.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-clockpicker.min.css" rel="stylesheet">
<link href="../css/zcss/bootstrap-table.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/bootstrap-select.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/core.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/components.css" rel="stylesheet" type="text/css">

<!--图标的外部样式-->
<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css"
	rel="stylesheet" type="text/css">
<!--图标的外部样式-->

<link href="../css/zcss/pages.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/responsive.css" rel="stylesheet" type="text/css">
<link href="../css/zcss/sweetalert.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/custombox.min.css" rel="stylesheet">
<link href="../css/zcss/animate.min.css" rel="stylesheet"
	type="text/css">
<link href="../css/zcss/css.css" rel="stylesheet" type="text/css">

<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>

<!-- 引用Vue -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/jqp.js"></script>-->
<!--<script type="text/javascript" src="js/jquery-3.1.0.js"></script>-->
<script type="text/javascript"
	src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

<body class="fixed-left">

	<div class="content-page crm" style="margin: 0;">
		<div class="content" style="margin: 0;">
			<div class="container-fluid">
				<h4 class="m-b-20">
					<b><i class="fa fa-share-alt-square m-r-5"></i>批量共享/转移</b>
				</h4>
				<p>
					说明：1)选中需要共享或者转移的客户 2)点击列表 <b>右上方</b>的“批量共享”或者“批量转移”
				</p>
				<div class="row">
					<el-form ref="ruleForm" class="demo-ruleForm" :model="ruleForm"
						:rules="rules">
					<div id="search">

						<div style="height: 50px; width: 500px; margin: 0 auto;" id="app">
							<el-input placeholder="输入联系人" v-model="ruleForm.input"
								class="input-with-select"> <el-select
								v-model="ruleForm.selects" slot="prepend" clearable
								placeholder="全部数据"> <el-option label="客户名称"
								value="1221"></el-option> <el-option label="所有者" value="1222"></el-option>
							<el-option label="权限" value="1231"></el-option> </el-select> <el-button
								slot="append" icon="el-icon-search"
								@click="submitForm('ruleForm')"></el-button> </el-input>
						</div>
					</div>

					<div id="qlist100" style="z-index: 0">
						<div id="editqlist100"
							style="position: absolute; display: none; &amp; amp; amp; amp; amp; amp; amp; amp; #9; left: 0; &amp; amp; amp; amp; amp; amp; amp; amp; #9; top: 0; width: 0; &amp; amp; amp; amp; amp; amp; amp; amp; #9; height: 0; z-index: 100; background-color: #D4D0C8;"></div>
						<input name="mdb" type="hidden"
							value="91ec1f9324753048c0096d036a694f86"> <input
							name="db" type="hidden" value="customer"> <input
							name="cn" type="hidden" value="qlist100">
						<div class="row m-t-15">

							<div id="app" class="col-sm-9 text-right">
								<div id="piliang" style="display: inline-block;">
									<!--   onclick="funsub();" -->
									<el-button :plain="true" @click="center('1')">批量共享</el-button>
									<el-dialog title="批量共享" :visible.sync="centerDialogVisible"
										name="dialog" width="900px" center> <iframe
										src="/chuste" width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
								</div>
								<div id="zhuanyi" style="display: inline-block;">
									<el-button :plain="true" @click="center('2')">批量转移</el-button>
									<el-dialog title="批量转移" :visible.sync="centerDialogVisible2"
										width="900px" center> <iframe src="/kehuzhuangyi"
										width="100%" frameborder="0"
										onload="this.height=this.contentWindow.document.body.scrollHeight,this.width = this.contentWindow.document.body.scrollWidth"></iframe>
									</el-dialog>
								</div>
							</div>
						</div>
					</div>

					<router-view v-if="isRouterAlive">
					<div id="idid">
						<div class="tab-content">
							<div class="bootstrap-table m-t-10">
								<div class="fixed-table-container" id="fixed-table-container">
									<table class="table table-bordered table-hover" id="sefef">
										<thead>
											<tr>
												<th class="bs-checkbox" style="width: 36px;">
													<div class="th-inner">
														<template> <!-- `checked` 为 true 或 false --> <el-checkbox
															v-model="checked"></el-checkbox> </template>
													</div>
													<div class="fht-cell"></div>
												</th>

												<th class="th-inner ">
													<p>
														<a class="na"
															href="JavaScript:qlist100_argv_orderf='id'; qlist100_argv_orderv=0;qlist100_load();"
															set-lan="html:ID">ID</a>
													</p>
												</th>

												<th class="th-inner ">
													<p align="left">
														<a class="na"
															href="JavaScript:qlist100_argv_orderf='cu_name'; qlist100_argv_orderv=0;qlist100_load();"
															set-lan="html:客户名称">客户名称</a>
													</p>
												</th>
												<th class="th-inner ">
													<p>
														<a class="na"
															href="JavaScript:qlist100_argv_orderf='owner'; qlist100_argv_orderv=0;qlist100_load();"
															set-lan="html:<font color=red>所有者</font>"> <font
															color="#000000">所有者</font>
														</a>
													</p>
												</th>
												<th class="th-inner ">
													<p align="left">
														<a class="na"
															href="JavaScript:qlist100_argv_orderf='sflag'; qlist100_argv_orderv=0;qlist100_load();"
															set-lan="html:<font color=red>公开</font>"> <font
															color="#000000">权限</font>
														</a>
													</p>
												</th>
												<th class="th-inner ">&nbsp;</th>
											</tr>
										</thead>

										<tbody class="bg-white">
											<tr v-for="(customers,i) in tableData" v-model="tablse">

												<td class="bs-checkbox"><el-form-item prop="type">
													<el-checkbox-group v-model="ruleForm.type">
													<el-checkbox :label="customers.cus_id" name="type"
														v-model="ruleForm.type" v-bind:value="customers.cus_id"
														:key="customers.cus_id"
														@change="handleCheckedCitiesChange"> </el-checkbox> </el-checkbox-group> </el-form-item></td>
												<td>
													<p>{{customers.cus_id}}</p>
												</td>
												<td>
													<p align="left">{{customers.cus_name}}</p>
												</td>
												<td>
													<p align="left">{{customers.use_name}}</p>
												</td>
												<td>
													<p>{{customers.cusm_desc}}</p>
												</td>
												<td width="1%" nowrap="">
													<!-- dialogVisibledelect(customers.cus_id) --> <el-button
														type="text"
														@click="dialogVisibledelect(customers.cusm_id)"
														icon="el-icon-delete"> </el-button> <el-dialog
														:visible.sync="centerDialogVisible3" width="30%" center>
													<span>确定要删除吗？ </span> <span slot="footer"
														class="dialog-footer"> <el-button
															@click="centerDialogVisible3 = false">取消</el-button> <el-button
															type="primary" @click="deletehandeke()">确定</el-button>
													</span> </el-dialog>

												</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="col-sm-7">
								<el-pagination @size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									:current-page="ruleForm.currentPage" :page-sizes="[5,10,15,20]"
									:page-size="ruleForm.pagesize"
									layout="total, sizes, prev, pager, next, jumper"
									:total="ruleForm.totalCount"> </el-pagination>
							</div>
						</div>
					</div>
					</router-view> </el-form>
				</div>
				<script>
				var vm = new Vue({
					el: ".demo-ruleForm",
					data() {
						return {
							//表格当前页数据
			                tableData: [],
			                tablse:[],
			                //用于临时存放数据
			                tablsets:[],
			                centerDialogVisible: false,
			                centerDialogVisible2: false,
			                centerDialogVisible3:false,
			                tadelete:"",
			                isRouterAlive:true,
							ruleForm: {
								//默认选择框为不选中
								checked:false,
								type:[],
								//搜索框
								input: '',
								//下拉条件按钮
								selects: '',
								 //默认每页数据量
				                pagesize:5,
				              //当前页码
				                currentPage: 1,
				                //默认数据总数
				                totalCount:20,
						        }
						}
					},
					methods: {						
						//从服务器读取数据
		                loadData: function(){  
		                	var iosnn=this;
		                	//post提交数据
							axios.post("customer/kehufneixng",
								//参数转换
								Qs.stringify(this.ruleForm, {
									arrayFormat: 'brackets'
								})		
							).then(function(v) {
								iosnn.tableData = v.data;
								 console.info(v.data); 
							}).catch(function(e) {
								alert("出错了"+e);
							});
		                },
		                dialogVisibledelect(vals){
		                	//alert(vals);
		                	vm.centerDialogVisible3 = true;
		                	vm.tadelete=vals;
		                	           	
		                },
		                deletehandeke:function(){
		                	if(vm.tadelete==null){
		                		
		                	}else{
		                		axios.post("customer/kehufneixngdelect",
										//参数转换
										Qs.stringify({'vals':vm.tadelete}, {
											arrayFormat: 'brackets'
										})	
									).then(function(v) {
										 //console.info(v.data); 
										 alert(v.data.delct);
										// window.location.reload();
										this.isRouterAlive = false
									}).catch(function(e) {
										alert("出错了"+e);
									});
			                	vm.centerDialogVisible3=false;
		                	}
		                //	alert(vm.tadelete);
	                    	this.loadData();
	                    	
		                },
						handleSizeChange(val) {
		                	this.ruleForm.pagesize = val;
					        console.log( this.ruleForm.pagesize+'条');
					        this.ruleFormloadData();
					      },
					      handleCurrentChange(val) {
					    	  this.ruleForm.currentPage = val;
					        console.log(this.ruleForm.currentPage+'当前');
					        this.loadData();
					      },
						submitForm(formName) {
					    	  alert("vm.ruleForm.input           "+vm.ruleForm.input);
							//验证方法
							this.$refs[formName].validate((valid) => {
								if(valid) {
									this.loadData();
								} else {
									console.log('error submit!!');
									return false;
								}
							});
						},
						resetForm(formName) {
							this.$refs[formName].resetFields();
						},
						center:function(val){
							  if(vm.tablse.length<=0){
								  if(val==1){
								  alert("请选择要分享的客户");
								  }else{
									  alert("请选择要转移的客户");
								  }
							  }else{
								  if(val==1){
									  this.centerDialogVisible=true;	
								  }else{
									  this.centerDialogVisible2=true;	
								  }			
								  
								  let formData=vm.tablse;
								  let adminInfo=JSON.parse(JSON.stringify(formData));//需要转成json对象
								 // alert(formData);
								  axios.post("/selsekehu",
											//参数转换
											Qs.stringify(this.ruleForm, {
												arrayFormat: 'brackets'
											})	
										).then(function(v) {
											 console.info(v.data); 
										}).catch(function(e) {
											//alert("出错了"+e);
										});								  
							  }							
						},
						handleCheckedCitiesChange(val){
							this.checkedCities =val;
							 this.isIndeterminate =val;
							 //alert(val+"val");
							 if(val==true){
								 vm.tablse.push("1");
							 }else{
								 for(var items in vm.tablse)
									 vm.tablse.splice(items,1);
							 }
							 //this.isIndeterminate = false;
							 //  this.loadData();
							//alert(val+"val");
							//alert(vm.tablse);
							
						}
					},				
					mounted() {
						var iosnn=this;
						//post提交数据
						axios.post("/customer/kehufneixng",
							//参数转换
							Qs.stringify(this.ruleForm, {
								arrayFormat: 'brackets'
							})		
						).then(function(v) {
							iosnn.tableData = v.data;
							 console.info(v.data); 
							/* console.info(v.data); */
						}).catch(function(e) {
							alert("出错了"+e);
						});
					}					
				});
			</script>
			</div>
		</div>
	</div>
</body>
</html>